/* components */
import RoleViewHeader from '@src/modules/account/role/component/RoleViewHeader'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useRoleViewAuth } from "@src/modules/account/role/hooks"
import { useStoreCurrentSelectRole, useStoreInitData, useStoreRoles } from "@src/modules/account/role/store/hooks"
/* model */
import Role from '@model/entity/Role/Role'
/* vue */
import { ComponentInstance, computed, ComputedRef, defineComponent, ref } from 'vue'

export type RoleViewUserContentHeaderProps = {
  keyword: string;
}

export interface RoleViewUserContentHeaderSetupState {
  currentSelectRole: ComputedRef<Role>;
}

export enum RoleViewUserContentHeaderEventEnum {
  Input = 'input',
  Add = 'add',
  Delete = 'delete',
  Change = 'change'
}

export type RoleViewUserContentHeaderEmitsOptions = {
  input: () => void;
}

export type RoleViewUserContentHeaderInstance = ComponentInstance & RoleViewUserContentHeaderSetupState
export type RoleViewUserContentHeaderVM = RoleViewUserContentHeaderSetupState & RoleViewUserContentHeaderProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.RoleViewUserContentHeader,
  emits: [
    RoleViewUserContentHeaderEventEnum.Input,
    RoleViewUserContentHeaderEventEnum.Add,
    RoleViewUserContentHeaderEventEnum.Delete,
    RoleViewUserContentHeaderEventEnum.Change
  ],
  props: {
    keyword: {
      type: String,
      default: ''
    }
  },
  setup(props: RoleViewUserContentHeaderProps, { slots, emit }) {
    
    const { currentSelectRole } = useStoreCurrentSelectRole()
    
    const { canAddUser, canRemoveUser } = useRoleViewAuth()
    
    function handlerKeywordInput(value: string) {
      emit(RoleViewUserContentHeaderEventEnum.Input, value)
    }
    
    function handlerKeywordChange(value: string) {
      emit(RoleViewUserContentHeaderEventEnum.Change, value)
    }
    
    function handlerAddUserButtonClick() {
      emit(RoleViewUserContentHeaderEventEnum.Add)
    }
    
    function handlerDeleteButtonClick() {
      emit(RoleViewUserContentHeaderEventEnum.Delete)
    }
    
    return {
      canAddUser,
      canRemoveUser,
      currentSelectRole,
      handlerKeywordInput,
      handlerKeywordChange,
      handlerAddUserButtonClick,
      handlerDeleteButtonClick
    }
    
  },
  render() {
    return (
      <div class={ComponentNameEnum.RoleViewUserContentHeader}>
          <el-input
            class="role-view-user-content-header__input"
            placeholder={this.$t('common.placeholder.inputMemberSearch')}
            value={this.keyword}
            onInput={this.handlerKeywordInput}
            onChange={this.handlerKeywordChange}
          >
            <i slot="prefix" class="el-input__icon el-icon-search">
            </i>
          </el-input>
          
          {this.canAddUser && (
            <el-button 
              type="primary" 
              class="role-view-user-content-header__add-button" 
              onClick={this.handlerAddUserButtonClick}
            >
              {this.$t('common.label.addMember')}
            </el-button>
          )}
          
          {this.canRemoveUser && (
            <el-button 
              type="plain-third" 
              class="role-view-user-content-header__delete-button"
              onClick={this.handlerDeleteButtonClick}
            >
              {this.$t('common.base.batchRemove')}
            </el-button>
          )}
          
      </div>
    ) as any
  }
}) as any
